<template>
  <view class="content">
    <!-- 播放列表 -->
    <movable-area class="video-list" :style="videoListStyle">
      <view class="no-follow" v-if="is_no_follow">
        <view class="no-follow-message">您还没有关注，赶快去关注吧</view>
        <view class="no-follow-button" @click="set_tap()">
          <uni-icons size="25" color="#24B465" type="plusempty"></uni-icons>
          去关注
        </view>
      </view>
      <!-- 计时奖励 -->
      <movable-view class="videoReward" :x="movableView.x" :y="movableView.y" direction="all" @change="onChange"
                    @touchmove.stop="handleTouchMove">
        <videoReward ref="videoReward" @setRewardType="setRewardType"></videoReward>
      </movable-view>
      <!-- 新人任务 -->
      <movable-view class="newUserTask" :x="340" :y="170" direction="all" @change="onChange"
                    @touchmove.stop="handleTouchMove">
        <new-user-task ref="newUserTask" @setRewardType="setRewardType"
                       @showNewYearTask="$refs.newYearTask.show()"></new-user-task>
      </movable-view>
      <swiper class="swiper" :circular="!(viewListIndex===0 && swiperIndex===0)" :interval='100'
              :cancelable="false" vertical easing-function="default" :current="swiperIndex" @change="swiperChange"
              @transition="swiperTransition">
        <!-- 没有管组提示 -->
        <swiper-item v-for="(item,index) in viewList[viewListIndex]" :key="index">
          <!--          视频-->
          <view class="swiper-item" v-if="item.type!=='wenjuan'">
            <!-- 视频 -->
            <view class="video" :style="is_follow_list?'top:'+(contentTopcount+320)+'rpx':''">
              <video :id="'myVideo'+index" :title="item.title" :ref="'myVideo'+index" :controls="false"
                     :show-center-play-btn="false" :http-cache="true" @timeupdate='videoTimeUpdateEvent'
                     @ended="endVideo" @play="videoPlay" @pause="videoPause" object-fit="cover" loop
                     :src="encodeURI(decodeURI(item.videoAddress))">
              </video>
            </view>
            <!-- 视频操作 -->
            <view class="video-assemb" @click="isPlay(index,!is_plays)">
              <view class="follow_user_button" v-if="video_list_type===1 && !is_follow_list"
                    :style="{top:contentTop}" @click.stop="is_follow_list=true">
                <view class="follow-message">关注人</view>
                <view class="follow-icon">
                  <uni-icons color="#fff" type="eye-filled"></uni-icons>
                </view>
              </view>
              <view class="follow_user_list" v-if="video_list_type===1 && is_follow_list"
                    :style="{top:(contentTopcount+10)+'px'}" @click.stop="is_follow_list=false">
                <scroll-view scroll-x class="user-list">
                  <view class="user-item" v-for="(items,$index) in follow_user"
                        @click="set_follow(items)" :key="items.id">
                    <view class="user-item-img">
                      <image :src="items.logo"></image>
					  <view class="username">{{ items.attName || items.categoryName }}</view>
                    </view>
                    
                  </view>
                </scroll-view>
              </view>
              <!-- 进度条-园 -->
              <view class="speed-progress" :style="{top:contentTop}" v-if="item.hasAward===1 && rewardType===2">
                <view class="speed-progress-yuan">
                  <cmd-progress type="circle" :stroke-width="15" :width="96" stroke-shape="square"
                                :percent="receiveMessage==='ok'?'100':percent>=100?99:percent"
                                stroke-color="red"></cmd-progress>
                </view>
                <view class="speed-progress-message">
                  <text v-if="receiveMessage==='ok'">成功获取奖励</text>
                  <text v-if="receiveMessage!=='ok'">等待奖励获得</text>
                </view>
              </view>
              <!-- 操作按钮 -->
              <view class="set">
                <!-- 发布视频作者 -->
                <view class="user-info" @click.stop="follow()">
                  <view class="user-img shadow">
                    <image :src="item.cateLogo"></image>
                  </view>
                  <view class="user-icon" v-if="item.hasInterest===0">
                    <image src="../../static/image/icon_guanzhu@2x.png"></image>
                  </view>
                  <view class="follow shadow-font">
                    {{ item.hasInterest === 1 ? '已关注' : '关注' }}
                  </view>
                </view>
                <!-- 点赞 -->
                <view class="giveThumbs-up" @click.stop="like()">
                  <view class="icon shadow-icon">
                    <image v-if="item.hasPraise!==1"
                           src="../../static/image/sy_icon_dianzan@2x.png">
                    </image>
                    <image v-if="item.hasPraise===1"
                           src="../../static/image/sy_icon_dianzan_pre@2x.png"></image>
                  </view>
                  <view class="message shadow-font">点赞</view>
                  <view class="count shadow-font">{{ item.praiseCount }}</view>
                </view>
                <view class="giveThumbs-up" @click.stop="commentShow(item)">
                  <view class="icon shadow-icon">
                    <image
                        src="../../static/image/pinglun.png">
                    </image>
                  </view>
                  <view class="message shadow-font">评论</view>
                  <view class="count shadow-font">{{ item.commentCount }}</view>
                </view>
                <!-- 收藏 -->
                <view class="collection" @click.stop="collection(item.id,index)">
                  <view class="icon shadow-icon">
                    <image v-if="item.hasCollect!==1"
                           src="../../static/image/sy_icon_shoucang@2x.png"></image>
                    <image v-if="item.hasCollect===1"
                           src="../../static/image/sy_icon_shoucang_pre@2x.png"></image>
                  </view>
                  <view class="message shadow-font">收藏</view>
                  <view class="count shadow-font">{{ item.collectCount }}</view>
                </view>
                <!-- 转发 -->

                <button class="forward" open-type="share">
                  <view class="icon ">
                    <image src="../../static/image/sy_icon_fenxiang@2x.png"></image>
                  </view>
                  <view class="message shadow-font">
                    转发
                  </view>
                  <view class="count shadow-font">{{ item.shareCount }}</view>
                </button>

              </view>
              <!-- 暂停播放 -->
              <view v-if="!is_plays" @click.stop="isPlay(index,!is_plays)" class="bofang">
                <image src="https://wechat-pictures-1301970825.file.myqcloud.com/pay.png"></image>
              </view>
              <!-- 暂停播放 end -->
              <!-- 视频文案 -->
              <view class="video-content">
                <view class="author">@{{ item.cateName }}</view>
                <view class="video-desc">
                  {{ item.title }}
                </view>
              </view>
              <!--    圈子快捷入口-->
              <view class="circle-message" @click="toCircle(item.topicVideoRecomment.id)"
                    v-if="item.topicVideoRecomment">
                <view class="circle-icon">
                  <image
                      src="https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/wxapp/video/huati.png"></image>
                </view>
                <view class="circle-text">
                  <uni-notice-bar class="uni-notice-bar" backgroundColor="rgba(0,0,0,0)" color="#fff" scrollable
                                  :text="item.topicVideoRecomment.title"/>
                </view>
                <view class="circle-icon">
                  <uni-icons type="forward" size="20" color="#fff"></uni-icons>
                </view>
              </view>
            </view>
          </view>
          <!--          问卷-->
          <view class="swiper-item" v-if="item.type==='wenjuan'">
            <questionnaire @setQuestionnaire="setQuestionnaire" :questionnaireItem="item"
                           ref="questionnaire"></questionnaire>
          </view>
        </swiper-item>
      </swiper>
    </movable-area>
    <!--    加载中-->
    <view class="gif-login" v-if="video_gif_show">
      <view class="loading"></view>
      <view class="loading-title">加载中</view>
    </view>
    <!-- 评论-->
    <comment v-if="isComment" ref="comment" @commentHide="commentHide"></comment>
    <new-year-task-pop ref="newYearTask"></new-year-task-pop>
  </view>
</template>
<script>
import videoReward from "@/pages/sindex/components/videoReward.vue"
import questionnaire from "@/pages/sindex/components/questionnaire.vue";
import comment from "@/pages/sindex/components/comment.vue";
import newUserTask from "@/pages/sindex/components/newUserTask.vue";
import NewYearTaskPop from "@/components/new-year-task-pop/new-year-task-pop.vue";

export default {
  components: {NewYearTaskPop, videoReward, questionnaire, comment, newUserTask},
  name: "video-list",
  props: ['video_list_type', 'active', 'api', 'method', 'collecton', 'answerEndVideoList', 'entranceValue'],
  data() {
    return {
      percent: 0, //奖励获取进度
      formData: {
        page: 1,
        pageSize: 10,
        lastVideoId: 0
      },
      list: [], // 原始数据
      swiperIndex: 0, //当前播放的视频下标
      viewList: [], //swiper数据二维数组数据
      viewList2: [], //swiper数据二维数组数据
      viewListIndex: 0, //当前所在的视频分组
      chunkSize: 3, //播放组视频长度
      is_plays: true, //当前播放视频的状态
      video_gif_show: true, //视频加载动画
      videoInfo: {}, //当前播放视频详情
      video_type: 0, // 进入首页的场景值
      sendVideoType: { // 视频上报状态
        start: false, //是否上报过开始
        end: false, //是否上报过结束
      },
      receiveMessage: "", //是否成功领取奖励
      isPlayVideoEnd: false, // 当前视频是否完成播放完成
      videoContextList: [],
      contentTop: (uni.getStorageSync('menuInfo').contentTopcount + 10) + 'px', //胶囊高度
      contentTopcount: uni.getStorageSync('menuInfo').contentTopcount, //胶囊相关
      is_no_follow: false, //是否显示去管组按钮
      is_follow_list: "", //是否显示关注列表
      follow_user: "", //关注列表
      isListEnd: false, // 视频是否加载完
      listIndex: 0, // 当前播放的原始数据下标
      movableView: { // 奖励位置
        x: 10,
        y: (uni.getStorageSync('menuInfo').contentTopcount + 10) < 20 ? 150 : (uni.getStorageSync('menuInfo').contentTopcount + 10)
      },
      rewardStatus: false,//true 开始计算时间，false 停止即时
      videoPlayEndArray: [],// 播放完成的视频id
      rewardType: 2,// 奖励类型 默认走前30个视频
      isQuBox: false,// 测试
      touchObj: {
        clientX: 0,
        clientY: 0
      },
      questionnaireStyle: "",
      pushWenjuan: [],// 问卷id
      isComment: true,
      videoListStyle: "padding-bottom:" + uni.getStorageSync('footer-menu').height + 'px;'
    };
  },
  created() {
    this.isComment = true
    if (this.video_list_type === 1) { // 关注
      this.get_follow_list()
    } else if (this.video_list_type === 2) { // 收藏
      this.getCollecton()
    } else if (this.video_list_type === 3) { //视频答题结束
      this.getAnswerEndVideoList()
    } else { // 推荐
      this.getList()
    }
    if (uni.getStorageSync("to_index_video")) {
      this.set_index_video(); //观看视频入口判断
    } else {
      this.video_type = 0
    }
    if (this.entranceValue > 0) {
      this.video_type = this.entranceValue
    }
  },
  computed: {},
  mounted() {
  },
  watch: {
    list: {
      handler(newArray, oldArray) {
        // 视频列表拆分成二维数组
        this.viewList = this.getViewList(newArray)
      },
      deep: true // 深度监听数组的变化
    },
    // 同步到子组件
    rewardStatus: {
      handler(newArray, oldArray) {
        this.$refs.videoReward.setRewardStatus(newArray, this.videoInfo.id)
      },
      deep: true
    },
    swiperIndex: {
      handler(newArray, oldArray) {
        this.isPlay(oldArray, false)
        this.isPlay(newArray, true, 'start')
        // 上报上一个视频结束时长
        if (!this.sendVideoType.end) {
          this.sendVideoType.end = true;
          this.sendVideoLog(4, this.videoInfo)
        }
        // 如何上一个视频领取奖励是成功，将上一个视频修改为不可领取状态
        if (this.receiveMessage === 'ok') {
          let n = (this.viewListIndex * this.chunkSize) + (this.swiperIndex) - 1
          this.list[n].hasAward = 0
        }
        // 设置当前播放视频信息
        this.videoInfo = {}
        // 清空上报状态
        this.sendVideoType.start = false
        this.sendVideoType.end = false
        // 清空领取奖励状态
        this.receiveMessage = ''
        // 清空视频是否完整播放完成
        this.isPlayVideoEnd = false
      },
      deep: true
    },
    videoInfo: {
      handler(newArray, oldArray) {
        // 储存已观看的视频
        let videoWatchedList = uni.getStorageSync('videoWatchedList') || []
        if (videoWatchedList.length > 100) {
          videoWatchedList = []
        }
        if (!videoWatchedList.includes(this.videoInfo.id) && this.videoInfo.id) {
          videoWatchedList.push(this.videoInfo.id)
          uni.setStorageSync('videoWatchedList', videoWatchedList)
        }
        // 储存已观看的视频--end
      },
      deep: true
    }
  },
  beforeDestroy() {
  },
  methods: {
    // 设置RewardType
    setRewardType(type) {
      this.rewardType = type
    },
    // 滑动奖励模块禁止滑动banner
    handleTouchMove(event) {
      event.stopPropagation();
    },
    // 监听滑动位置
    onChange(e) {
      // const {x,y} = e.detail;
    },
    // 检测滑动视频
    swiperTransition(event) {
      let dy = event.detail.dy
    },
    //跳转到推荐列表
    set_tap() {
      this.$emit("setSwiper", 0);
    },
    // 视频答题结束推荐
    getAnswerEndVideoList() {
      this.list = this.answerEndVideoList
      this.getList()
    },
    // 获取视频列表
    async getList() {
      let data = this.formData
      let url = this.api
      let method = this.method
      const res = await this.$NoteApi.doRequest(method, url, data, 'json')
      if (res.data.data.length === 0) {
        this.isListEnd = true
        this.$forceUpdate()
      }
      this.list = this.list.concat(res.data.data);
      this.formData.lastVideoId = this.list[this.list.length - 1].id;
      if (data.page === 1) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.isPlay(0, true)
          }, 500)
        })
        this.$emit("pgetMessageList", this.list[0]);
      }
    },
    //获取关注列表接口
    async get_follow_list() {
      let {
        data
      } = await this.$NoteApi.doRequest('post', 'follow/followCateList', {}, 'json')
      if (data.code === 0) {
        this.follow_user = data.data
        if (this.follow_user.length === 0) {
          this.is_no_follow = true
          return
        }
        this.formData.followId = data.data[0].id
        this.getList()
      }
    },
    // 切换关注分组
    set_follow(item) {
      this.formData.followId = item.id;
      this.formData.page = 1;
      this.formData.lastVideoId = 0
      this.list = [];
      this.getList();
    },
    // 获取收藏列表
    getCollecton() {
      this.list = this.collecton.list
      this.formData.page = this.collecton.FormData.page
      let index = this.collecton.index
      let chunkSize = this.chunkSize
      this.viewListIndex = Math.floor(index / chunkSize)
      this.swiperIndex = index % chunkSize
      setTimeout(() => {
        this.isPlay(this.swiperIndex, true)
      }, 300)
      this.formData.page++
      this.getList()
    },
    // 进入的场景值
    //其他入口判断
    set_index_video() {
      let data = uni.getStorageSync("to_index_video");
      if (data.type === 301) {
        this.video_type = 0;
        this.isShare = true
      } else {
        this.video_type = data.type;
      }
      this.list.push(data.video);
      uni.setStorageSync("to_index_video", false);
    },
    // 拆分数组
    getViewList(arr) {
      let chunkSize = this.chunkSize; // 指定每个子数组的大小
      return arr.reduce((acc, curr, index) => {
        if (index % chunkSize === 0) {
          acc.push([curr]);
        } else {
          acc[acc.length - 1].push(curr);
        }
        return acc;
      }, [])
    },
    // 切换视频
    swiperChange(e, setIndex = 0) {
      let index = e.detail.current || setIndex;
      // 向下滑动
      if (this.swiperIndex === (this.chunkSize - 1) && index === 0) {
        this.viewListIndex++;
      }
      // 向上滑动
      if (this.swiperIndex === 0 && index === (this.chunkSize - 1)) {
        this.viewListIndex--;
      }
      this.swiperIndex = index
      // 播放到最后一个视频组的时候加载下一页
      if (this.viewListIndex >= this.viewList.length - 2) {
        this.formData.page++
        this.getList()
      }
      if (this.isListEnd && this.viewListIndex > (this.viewList.length - 1)) {
        uni.showToast({
          title: '已经到底部了',
          icon: 'none'
        })
        this.viewListIndex = 0
        this.swiperIndex = 0
      }
      // 数据重新排序（防止页面卡顿）
      this.setViewItem(index)
      this.$nextTick(() => {
        // 开启视频加载动画
        if (this.viewList[this.viewListIndex][this.swiperIndex].type !== 'wenjuan') {
          this.video_gif_show = true;
        }
        this.$emit("pgetMessageList", this.viewList[this.viewListIndex][this.swiperIndex]);

      })
    },
    // 设置视频播放状态
    setVideoPlayAll(index) {
      setTimeout(() => {
        // 暂停其他视频
        for (let i = 0; i < 2; i++) {
          this.isPlay(i, false)
        }
        // 播放现在的视频
        this.isPlay(index, true)
      }, 300)
    },
    // 视频开始播放
    videoPlay() {
      this.video_gif_show = false; //关闭加载动画
    },
    // 暂停视频触发
    videoPause() {
      this.rewardStatus = false
    },
    // 视频播放中
    videoTimeUpdateEvent(e) {
      // currentTime 播放时长
      // duration    视频时长
      let {
        currentTime,
        duration
      } = e.detail
      // 设置当前播放视频
      if (!this.videoInfo.id) this.videoInfo = this.viewList[this.viewListIndex][this.swiperIndex]
      this.setPercent(currentTime, duration)
      // 上报开始观看视频
      if (!this.sendVideoType.start) {
        this.sendVideoType.start = true
        this.sendVideoLog(3, this.videoInfo)
      }
      //关闭加载动画
      this.video_gif_show = false
      // 视频停留时长,没有开始计算并且当前播放视频没有在已播放完成视频
      if (!this.rewardStatus && !this.videoPlayEndArray.includes(this.videoInfo.id)) {
        this.rewardStatus = true
      }
      // 判断视频是否满足参余问卷
      if (this.videoInfo.qaId > 0 && !this.pushWenjuan.includes(this.videoInfo.qaId) && (duration - currentTime < 30 && duration - currentTime !== 0)) {
        // this.isQuBox=true
        this.pushWenjuan.push(this.videoInfo.qaId)
        let n = (this.viewListIndex * this.chunkSize) + (this.swiperIndex)
        this.list.splice(n + 1, 0, {
          type: 'wenjuan',
          stage: this.videoInfo.stage,
          qaId: this.videoInfo.qaId, ...this.videoInfo
        })
        this.setViewItem(this.swiperIndex)
      }
    },
    // 视频播放完成
    endVideo() {
      // 上报视频观看完成
      if (!this.sendVideoType.end) {
        this.sendVideoType.end = true
        this.isPlayVideoEnd = true
        this.sendVideoLog(4, this.videoInfo)
        if (!this.videoPlayEndArray.includes(this.videoInfo.id)) {
          this.$refs.newUserTask.setIndex()
        }
        this.videoPlayEndArray.push(this.videoInfo.id)
        this.rewardStatus = false
      }
    },
    // 设置播放进度
    setPercent(currentTime, duration) {
      // 设置元的百分比
      this.percent = (currentTime / duration) * 100;
      // 设置当前播放视频的秒数
      this.videoInfo.currentTime = currentTime
      // 设置视频时长
      this.videoInfo.duration = duration
    },
    // 上报视频播放
    // action 行为3 开始看一条视频,4 看完一条视频, 5 分享一条视频,6 点赞一条视频,7 取消点赞一条视频
    // videoInfo 当前视频详情
    async sendVideoLog(action, videoInfo) {
      action = parseInt(action)
      let data = {
        action: action, // 行为
        videoId: videoInfo.id, // 播放的视频id
      }
      if ([3, 4].includes(action)) {
        data.entrance = this.video_type !== 0 ? this.video_type : 0; //场景值
        data.fromChicken = this.$fromDd.type === 2 ? 1 : 0; //是否养鸡进入
        //区分预知的推荐视频
        data.requestId = videoInfo.requestId;
        data.tag = videoInfo.tag;
        data.sceneId = videoInfo.sceneId;
        data.channel = videoInfo.channel;
        data.stage = videoInfo.stage
        if (action === 3) {
          data.rid = videoInfo.rid;
        } else if (action === 4) {
          data.duration = parseInt(videoInfo.currentTime); //视频播放时长
        }
      }
      let res = await this.$NoteApi.doRequest("post", 'action/report', data, 'json')
      if (res.data.code === 0) {
        if (action === 4 && this.isPlayVideoEnd) {
          this.receiveMessage = res.data.data.errormsg
        }
        return true
      } else {
        return false
      }
    },
    // 开始播放视频，暂停视频
    isPlay(id, type, schedule = 'end') {
      let name = 'myVideo' + id;
      this.videoContextList[id] = uni.createVideoContext(name, this);
      this.is_plays = type;
      if (type) {
        if (schedule === 'start') {
          this.videoContextList[id].seek(0)
        }
        setTimeout(() => {
          this.videoContextList[id].play();
        }, 300)
      } else {
        this.videoContextList[id].pause();
      }
    },
    // 处理节点切换卡顿问题
    setViewItem(index) {
      this.listIndex = (this.viewListIndex * this.chunkSize) + (this.swiperIndex)
      if (this.listIndex === 0) {
        return
      }
      if (index === 0) {
        // 当前列的第三个修改上一个节点的第三个
        this.viewList[this.viewListIndex][2] = this.list[(this.listIndex - 1)]
      } else if (index === 1) {
        // 初始化
        this.viewList[this.viewListIndex] = [
          this.list[this.listIndex - 1],
          this.list[this.listIndex],
          this.list[this.listIndex + 1],
        ]
      } else if (index === 2) {
        // 当前列的第一个视频修改下一个节点的第一个视频
        this.viewList[this.viewListIndex][0] = this.list[(this.listIndex + 1)]
      }
      // this.$forceUpdate()
      // this.$nextTick(()=>{
      //   this.setVideoPlayAll(index)
      // })
    },
    // 关注
    async follow() {
      let formData = {
        duration: parseInt(this.videoInfo.currentTime),
        videoDuration: parseInt(this.videoInfo.duration),
        videoId: this.videoInfo.id,
        followId: this.videoInfo.cateId
      }
      let isHasInterest = this.videoInfo.hasInterest
      const url = isHasInterest === 0 ? 'follow/follow' : 'follow/unfollow'
      const {
        data
      } = await this.$NoteApi.doRequest('post', url, formData, 'json')
      if (data.code === 0) {
        let n = (this.viewListIndex * this.chunkSize) + (this.swiperIndex)
        this.list[n].hasInterest = this.list[n].hasInterest ? 0 : 1
      }
    },
    // 点赞
    like() {
      let action = this.videoInfo.hasPraise === 1 ? 7 : 6;
      this.sendVideoLog(action, this.videoInfo)
      let n = (this.viewListIndex * this.chunkSize) + (this.swiperIndex)
      this.list[n].praiseCount = this.list[n].hasPraise === 1 ? this.list[n].praiseCount - 1 : this.list[n]
          .praiseCount + 1;
      this.list[n].hasPraise = this.list[n].hasPraise === 1 ? 0 : 1;
    },
    // 显示评论
    commentShow(item) {
      this.$emit('commentShow')
      this.$refs.comment.show(item)
    },
    //收藏操作
    async collection() {
      let formData = {
        duration: parseInt(this.videoInfo.currentTime),
        videoDuration: parseInt(this.videoInfo.duration),
        videoId: this.videoInfo.id,
      }
      let isCollection = this.videoInfo.hasCollect
      const url = isCollection === 0 ? 'collect/collect' : 'collect/uncollect'
      const {
        data
      } = await this.$NoteApi.doRequest('post', url, formData, 'json')
      if (data.code === 0) {
        let n = (this.viewListIndex * this.chunkSize) + (this.swiperIndex)
        this.list[n].collectCount += isCollection === 0 ? 1 : -1
        this.list[n].hasCollect = this.list[n].hasCollect ? 0 : 1
      }
    },
    // 保存答题结果
    setQuestionnaire(res, answerId) {
      let n = (this.viewListIndex * this.chunkSize) + (this.swiperIndex)
      this.list[n].res = res;
      this.list[n].answerId = answerId
    },
    commentHide(total) {
      this.$emit('commentHide')
      let n = (this.viewListIndex * this.chunkSize) + (this.swiperIndex)
      this.list[n].commentCount = total
    },
    toCircle(id) {
      this.$emit('setToCircle')
      uni.navigateTo({
        url: "/pages/circle/details/details?id=" + id
      })
    }
  }
}
</script>

<style>
.shadow {
  box-shadow: 0 0 10upx 0 #999;
}

.shadow-icon {
  //filter: drop-shadow(0 0 10px #999);
}

.shadow-font {
  text-shadow: 0 2upx 2upx rgba(0, 0, 0, 0.2);
}

.content {
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.video-assemb {
}

.video-list {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 100upx;
}

.video-list .swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: all 0.3s linear;
  border-radius: 20upx 20upx 0 0;
}

.video video {
  width: 100%;
  height: 100%;
  border-radius: 20upx 20upx 0 0;
}

.video image {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.video-assemb {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  box-sizing: border-box;
  padding: 20upx;
}

.speed-progress {
  height: 150upx;
  width: 160upx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  right: 20upx;
  top: 200upx;
}

.speed-progress-yuan {
  width: 100upx;
  height: 100upx;
}

.speed-progress-message {
  width: 100%;
  font-size: 26upx;
  color: #FFFFFF;
}

/* .task-enter {
  position: fixed;
  right: 40rpx;
  width: 126rpx;
  height: 126rpx;
}
.task-enter-icon {
  width: 126rpx;
  height: 126rpx;
} */

.set {
  width: 80upx;
  position: absolute;
  bottom: 100upx;
  right: 20upx;
}

.user-info,
.giveThumbs-up,
.collection,
.forward {
  margin-top: 15upx;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.forward {
  background-color: transparent;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 15upx !important;
  line-height: 40upx;
}

button::after {
  border: none;
}

.user-img {
  width: 80upx;
  height: 80upx;
  border-radius: 50%;
  border: 2upx solid #fff;
}

.user-img image {
  border-radius: 50%;
}

image {
  width: 100%;
  height: 100%;
}

.user-icon {
  width: 52upx;
  height: 52upx;
  margin-top: -25upx;
}

.follow {
  font-size: 30upx;
  color: #fff;
  margin-top: 10upx;
  white-space: nowrap;
}

.set .icon {
  width: 60upx;
  height: 60upx;
}

.message {
  font-size: 28upx;
  color: #fff;
  font-weight: 500;
  margin: 8upx 0;
}

.count {
  font-size: 28upx;
  color: #fff;
  font-weight: 500;
}

.video-content {
  position: absolute;
  bottom: 38upx;
  height: 200upx;
  left: 28upx;
  width: 60%;
}

.author {
  font-size: 38upx;
  color: #fff;
  font-weight: 500;
  margin-bottom: 11upx;
}

.video-desc {
  font-size: 34upx;
  color: #fff;
  font-weight: 400;
}

.follow_user_button {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 176upx;
  height: 60upx;
  border-radius: 32upx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.follow_user_list {
  width: 100%;
  position: absolute;
  height: 220upx;
  background-color: #000;
  transition: all 0.4s linear;
  left: 0;
  z-index: 1;
}

.user-list {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  // 滚动必须加的属性
}

.user-item {
  width: 118upx;
  margin: 0 30upx;
  display: inline-flex;
  // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 flex-direction: column; align-items: center;
}

.user-item-img {
  width: 118upx;
  height: 118upx;
  border-radius: 50%;
  border: 4upx solid #5CAE77;
}

.user-item-img image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.username {
  font-size: 28upx;
  color: #fff;
  text-align: center;
  margin-top: 20upx;
}

.gif-login {
  width: 200upx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: gif-login-donghua 1s forwards;
}

@keyframes gif-login-donghua {
  0% {
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.loading {
  position: relative;
  width: 100upx;
  height: 100upx;
  background: linear-gradient(45deg,
  transparent, transparent 40%, #e5f403);
  border-radius: 50%;
  animation: animate 2s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

.loading::before {
  content: '';
  position: absolute;
  top: 8upx;
  left: 8upx;
  bottom: 8upx;
  right: 8upx;
  background: #000000;
  border-radius: 50%;
  z-index: 100;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  /* background: #000; */
  background: linear-gradient(45deg,
  transparent, transparent 40%, #e5f403);
  border-radius: 50%;
  z-index: 1;
  filter: blur(30upx);
}

.loading-title {
  position: absolute;
  font-size: 18upx;
  animation: title-animation 2s linear infinite;
}

@keyframes title-animation {
  0% {
    color: #fff;
    filter: blur(2upx) hue-rotate(0deg);
    text-shadow: 0 0 10upx #e5f403;
  }

  100% {
    color: #fff;
    filter: blur(2upx) hue-rotate(360deg);
    text-shadow: 0 0 10upx #e5f403;
  }
}

.no-follow {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: fixed;
  top: 0;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.no-follow-message {
  font-size: 38upx;
  color: #BCC3CF;
}

.no-follow-button {
  width: 421upx;
  height: 118upx;
  border-radius: 59upx;
  background-color: #fff;
  border: 1upx solid #979797;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 47upx;
  font-size: 42upx;
  color: #24B465;
  font-weight: 500;
}

.bofang {
  width: 150upx;
  height: 150upx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
}

.Preload {
  z-index: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.videoReward {
  width: 120upx;
  height: 120upx;
  z-index: 10;
}

.newUserTask {
  width: 150upx;
  height: 160upx;
  z-index: 10;
}

.circle-message {
  width: 100%;
  height: 78upx;
  background-color: rgba(2, 51, 18, .57);
  font-size: 42upx;
  color: #fff;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0upx;
}

.circle-icon {
  width: 40upx;
  height: 40upx;
  margin: 0 22upx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-icon image {
  width: 100%;
  height: 100%;
}

.circle-text {
  flex: 1;
  overflow: auto;
  white-space: nowrap;
}

>>> .uni-noticebar {
  margin-bottom: 0;
}

/*.questionnaire-box{*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*}*/
/*.questionnaire{*/
/*  position: absolute;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  left: 0;*/
/*  bottom: -100%;*/
/*  background-color: #1FA2FF;*/
/*  transition: all .4s linear;*/
//}
</style>
